<?php
$username = $_GET["user"];
$userdata = array(
    'value' => $username
);
?>

<!DOCTYPE html>
<html>
    <?php
    echo '<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# object: http://ogp.me/ns/object#">';
    echo '<meta property="fb:app_id" content="454209954617767" />';
    echo '<meta property="og:type"   content="object" />';
    echo '<meta property="og:url"    content="http://107.22.190.35/user/' . $username . '" />';
    echo '<meta property="og:title"  content="Sample Object" />';
    echo '<meta property="og:image"  content="https://s-static.ak.fbcdn.net/images/devsite/attachment_blank.png" />';
    ?>
        <title>User Wish List</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">

        <link href="../assets/soshalib/wishlist.css" rel="stylesheet" media="screen">
        <!-- Bootstrap -->
        <link href="../assets/bootstrap/2.3.2/css/bootstrap.min.css" rel="stylesheet" media="screen">
    </head>
    <body style="background: #ccc">
        <div id="application" class="container-fluid">

            <div class="navbar navbar-inverse navbar-fixed-top">
                <div class="navbar">
                    <div class="navbar-inner">
                        <div class="container-fluid">
                            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                                <span class="icon-bar"></span>
                            </a>
                            <a href="#" class="brand">Soshalboard</a>

                            <div class="nav-collapse collapse">
                                <ul class="nav">
                                    <li><a href="/">Home</a></li>
                                    <li class="active"><a href="/user/me">Wishlist</a></li>
                                    <li><a href="/about.html">About</a></li>
                                </ul>
                                <ul class="nav pull-right" id="userrightmenu" style="display: none;">
                                    <li id="fat-menu" class="dropdown">
                                        <a href="#" id="username" role="button" class="dropdown-toggle" data-toggle="dropdown">Logging in.. <b class="caret"></b></a>
                                        <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
                                            <li><a tabindex="-1" href="/userprofile.html">Profile</a></li>
                                            <li class="divider"></li>
                                            <li><a tabindex="-1" onclick="doLogout();">Logout</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>
                            <!--/.nav-collapse -->
                        </div>
                    </div>
                </div>
            </div>

            <div id="maincontainer">
                <div id="loading" style="position: fixed; top: 250px; left : 300px;">
                    <img src="/images/ajax-loader-new.gif" >
                </div>
                <div id="wishcontainer" class="container-fluid masonry container testclass">
                </div>
            </div>
        </div>

        <div id="popup" class="popup">
               <div id="title" style="width:100%;height: 20px; border:solid;float:left"></div>
               <div id="image" style="width: 45%;height: 60%; border:solid;float:left"> Image</div>
               <div id="details" style="width: 45%;height: 60%;border:solid;float:right"> details</div>

                <div class="separator"></div>
        </div>

        <script type="text/template" id="wishelement_template_me">
            <% _.each( results, function( item, i ){ %>
            <div id="wishelement<%=i%>"  class="wishelement">
                <div id="type<%=i%>" class="elementtype">
                    <%= item.get("category").type %>
                </div>
                <div id="image<%=i%>" class="elementimage" >
                    <% if (item.get('category').url === "null") { %>
                        <img src="/images/defaultimage.jpg" >
                    <% } else { %>
                        <img src="<%= item.get('category').url %>" >
                    <% } %>
                </div>

                <div id="name<%=i%>" class="elementname">
                    <%= item.get("category").name %>
                </div>

<div class="itemseparator"></div>
                <div id="numberofpeople<%=i%>" class="noofpeople" >
                           Number of people want this : <%= item.get("noOfUsersWished") %>
                </div>

<div class="itemseparator"></div>
                <% if (item.get('status') === 0) { %>
                <div class="alreadybought" id="bought">
                     Already bought?
                </div>
                 <% } else { %>
                <div class="alreadybought" id="own">
                     I own this  :)
                </div>
                 <% } %>
                 <div class="itemseparator"></div>

                <div id="additionalcomments" style="display:none">
                              <%= item.get("additionalComments") %>
                </div>
                <div id="wishid" style="display:none">
                              <%= item.get("id") %>
                </div>
                </div>
            <% }); %>
        </script>

        <script type="text/template" id="wishelement_template_other">
            <% _.each( results, function( item, i ){ %>
            <div id="wishelement<%=i%>"  class="wishelement">

                <div id="type<%=i%>" class="elementtype">
                    <%= item.get("category").type %>
                </div>

                <div id="image<%=i%>" class="elementimage" >
                    <img src="<%= item.get('category').url %>" >
                </div>

                <div id="name<%=i%>" class="elementname" >
                    <%= item.get("category").name %>
                </div>

                <div id="numberofpeople<%=i%>" class="noofpeople" >
                    Number of people want this : <%= item.get("noOfUsersWished") %>
                </div>

                <div class="iwishtoo" >
                    I wish the same
                </div>
                <div id="additionalcomments" style="display:none">
                              <%= item.get("additionalComments") %>
                </div>

                <div id="wishid" style="display:none">
                              <%= item.get("id") %>
                </div>
                </div>
            <% }); %>
        </script>

        <script src="../assets/js/jquery-1.10.2.js"></script>
        <script src="../assets/js/jquery-ui-1.10.3.custom.min.js"></script>
        <script src="../assets/js/popup-overlay.js"></script>

        <script src="../assets/bootstrap/2.3.2/js/bootstrap.min.js"></script>
        <script src="../assets/js/masonary.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
        <script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

        <script src="../assets/soshalib/category.js"></script>
        <script src="../assets/soshalib/wishlist.js"></script>

        <script type="text/javascript">

        function showRightMenu(){
            var userFirstName = localStorage.getItem('userFirstName');
            $('#username').text("Logged in as "+userFirstName);
            $('#userrightmenu').show();
        };

        function doLogout(){
            localStorage.setItem("login","false");
            window.location.href = "/";
        };
        var username = <?php echo json_encode($userdata); ?>;

        var wishListRequiredFor = username.value;

        var currSessionID = localStorage.getItem('currentUserSession');

        showRightMenu();

        var $container = $('#wishcontainer');
        // initialize

        $(document).ready(function() {

            CategoryModel = Backbone.Model.extend({
                defaults: {
                    url: '',
                    type: '',
                    name: ''
                }
            });

            var wishListDataurl = 'http://localhost:8080/soshal/api/1.0/user/' + currSessionID + '/wishlist';

            var chooseRightTemplate = $('#wishelement_template_me').html();
            if (wishListRequiredFor !== 'me')
            {
                wishListDataurl = wishListDataurl + '/' + wishListRequiredFor;
                chooseRightTemplate = $('#wishelement_template_other').html()
            }

            WishListModalCollection = Backbone.Collection.extend({
                url: wishListDataurl,
                category: CategoryModel,
                user: "",
                status: "",
                noOfUsersWished:"",
                additionalComments:"",
                id: ""

            });

            WishElementView = Backbone.View.extend({
                template: _.template(chooseRightTemplate),
                el: $("#wishcontainer"),
                initialize: function() {
                    _.bindAll(this, 'addOne', 'addAll', 'render'); // bind 'this' in 'render'
                    this.collection = new WishListModalCollection();
                    this.collection.bind('change', this.render);
                    var self = this;
                    this.collection.fetch({
                        success: function() {
                            $('#loading').hide();
                            self.render();
                            $container.masonry({
                                columnWidth: 240,
                                itemSelector: '.wishelement'
                            });

                            $(".elementimage").click(function() {
                                var outerdiv = $(this).parent('.wishelement').attr("id");
                                showdetails(outerdiv);
                            });


                            $(document).on('click', ".iwishtoo", function() {
                                     var outerdivid = $(this).parent('.wishelement').attr("id");
                                     saveWish ("save", outerdivid);
                             });

                            $(document).on('click', "#bought", function() {
                                    var outerdivid = $(this).parent('.wishelement').attr("id");
                                    saveWish ("bought", outerdivid);
                            });

                        }
                    });
                },
                render: function() {
                    $(this.el).html(this.template({results: this.collection.models}));
                }
            });

            var myModelView = new WishElementView();
            //jQuery("img.lazy").lazy();

        });

        function saveWish(status, wishelementid)
        {
            var id="#"+  wishelementid;
            var elementname = $.trim($(id).children('.elementname').text());
            var elementtype = $.trim($(id).children('.elementtype').text());
            var comments = $.trim($(id).children('#additionalcomments').text());
            var wishid = $.trim($(id).children('#wishid').text());

            var wish = new classWish();

            wish.set_category(elementname, elementtype);
            wish.set_additional_comments(comments);

             if (status === "save")
                wish.save(currSessionID);
             else if (status === "bought")
                 wish.update(currSessionID, wishid)

        }

        function showdetails(wishelementid)
        {
            $('#popup').bPopup();

        }
		
        </script>
    </body>
</html>
